<template lang="pug">
.search-wrap(:style="{paddingBottom:height=='32px'?'10px':'5px'}")
    .input-wrap(:style="{'min-height':height}")
        template(v-for="item in copySearchList")
            formItem(
                :type="item.type"
                :pickerType="item.pickerType"
                :label="item.label"
                :prop="item.prop"
                :option="item.option"
                :clearable="item.clearable"
                :clearabled="item.clearabled"
                :placeholder="item.placeholder"
                :defaultValue="item.defaultValue"
                :defaultProps="item.defaultProps"
                :chooseParent="item.chooseParent"
                :searchShow="item.searchShow"
                @handleChange="handleChange"
                :title="item.title"
                ref="formItemLoad"
                :size="size"
            )
    .search-btns(v-if="btnShow")
        el-button(type="primary" :icon="Search" :size="size" @click="searchSubmit()") {{searchText}}
        el-button(type="" :icon="Refresh" :size="size" plain @click="searchReset()") 重置
    slot(name="searchSlot")
</template>
<script  setup>
import formItem from './formItem.vue'
import { reactive, ref, watch } from 'vue'
import { deepClone } from '@/utils'
import { Search, Refresh } from '@element-plus/icons-vue'
const props = defineProps({
    size: {
        type: String,
        default: ''
    },
    btnShow: {
        type: Boolean,
        default: true
    },
    downShow: {
        type: Boolean,
        default: false
    },
    searchText: {
        type: String,
        default: '查询'
    },
    searchList: {
        type: Array,
        default: function(){
            return []
        }
    }
})

const formItemLoad = ref(null)

const copySearchList = ref([])
let timer
const height = ref('32px')
const openShow = ref(false)
watch(()=>props.searchList, (n, o)=>{
    copySearchList.value = n
}, { immediate: true })

const emit = defineEmits(['searchChange', 'searchSubmit', 'searchReset', 'downSheet'])

const handleChange = (data) =>{
    copySearchList.value.forEach(val => {
        if (val.prop == data.prop){
            val.value = data.value
        }
    })
    if (timer){
        clearTimeout(timer)
        timer = null
    }
    timer = setTimeout(()=>{
        const res = resultInit()
        emit('searchChange', data, res)
    }, 10)
}

const searchSubmit = ()=>{
    const res = resultInit()
    emit('searchSubmit', res)
}
const resultInit = ()=>{
    const midObj = reactive({})
    copySearchList.value.forEach(val => {
        midObj[val.prop] = val.value || ''
        if (val.type == 'pickerRange'){
            midObj[val.prop] = val.value || ['', '']
        }
    })
    return midObj
}

const searchReset = ()=>{
    copySearchList.value = deepClone(props.searchList)
    const midObj = reactive({})
    copySearchList.value.forEach((val, i) => {
        val.value = val.defaultValue
        midObj[val.prop] = val.value || ''
        formItemLoad.value[i].valueInt()
    })
    emit('searchReset', midObj)
}
</script>
<style lang="less" scoped>
.search-wrap{
    display: flex;
    // background: linear-gradient( 180deg, rgba(6,43,83,0) 0%, #062B53 100%);
    // border-radius:8px 8px 0px 0px;
    // border: 1px solid #ccc;
    padding: 10px 20px 10px 0;
    margin-bottom: 4px;
    align-items: center;
    .input-wrap{
        margin-right: 10px;
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
    }
    :deep(.label){
        // color: #fff;
        color: #000;
        font-weight: 600;
        font-size: 14px;
        min-width: 86px;
    }
    :deep(.input-box){
        width: 215px;
    }
    :deep(.search-box){
        margin-right: 10px;
        &:last-child{
            margin-right: 0;
        }
    }
    .search-btns{
        flex-shrink: 0;
        display: flex;
        align-items: center;
        height: 32px;
    }
    :deep(.download-btn){
        margin-left: 30px;
        margin-bottom: 5px;
    }
}
</style>
<style>
</style>